<template>
    <div>
        <div class="container">
            <div class="sensitive">
                <el-row >
                    <el-col :span="12">
                        <div class="sensitive-type-menu">敏感类型</div>
                        <div class="sensitive-select">
                            <el-select v-model="sensitiveValue" placeholder="请选择" @change="handleChangeSensitive">
                                <el-option
                                v-for="item in sensitiveType"
                                :key="item.name"
                                :label="item.name"
                                :value="item.type">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="12" style="text-align:right">
                        <el-button type="primary" @click="handleClickEditSensitiveTypeShow()">增加或删除 敏感类型</el-button>
                        <el-button type="success" @click="handleClickEditSensitiveWordShow()">增加敏感词</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-row style="margin-top: 30px">
                <el-col :span="12">
                     <el-table
                        :data="sensitiveWord.slice(0,10)"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="word"
                            label="敏感词">
                        </el-table-column>
                        <el-table-column
                            label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" type="danger" @click="handleClickDeleteWordShow(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12">
                     <el-table
                        :data="sensitiveWord.slice(10,20)"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="word"
                            label="敏感词">
                        </el-table-column>
                        <el-table-column
                            label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" type="danger" @click="handleClickDeleteWordShow(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12"></el-col>
            </el-row>
            <div style="text-align: right; margin: 30px 0">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="20"
                    layout="prev, pager, next, jumper"
                    :total="wordTotal">
                </el-pagination>
            </div>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="editTypeVisible"
            width="65%">
            <div>
                <el-tabs v-model="activeSensitiveTypeValue" type="card">
                    <el-tab-pane label="添加新敏感词类型" name="add">
                        <el-input v-model.trim="newSensitiveTypeName" placeholder="请输入敏感类型"></el-input>
                    </el-tab-pane>
                    <el-tab-pane label="删除敏感词类型" name="delete">
                        <el-alert
                            style="margin-bottom: 30px"
                            :closable="false"
                            title="删除类型，也会删除对应下的敏感词。请慎重删除"
                            type="error"
                            center
                            show-icon>
                        </el-alert>
                        <el-select v-model="deleteSensitiveValue" placeholder="请选择要删除的类型">
                            <el-option
                            v-for="item in sensitiveType"
                            :key="item.name"
                            :label="item.name"
                            :value="item.type">
                            </el-option>
                        </el-select>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editTypeVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpdateSensitiveType()">确 定</el-button>
            </span>
        </el-dialog>
        
        <el-dialog
            title="提示"
            :visible.sync="editWordVisible"
            width="65%">
            <div>
                <el-select v-model="editWordTypeValue" placeholder="请选择敏感类型">
                    <el-option
                    v-for="item in sensitiveType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.type">
                    </el-option>
                </el-select>
                <el-input style="margin-top: 30px" type="textarea" v-model="newWordValue" placeholder="请输入新的敏感词,接受多个敏感词以换行隔开"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editWordVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpdateSensitiveWord()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="已存在敏感词"
            :visible.sync="preExistingVisible"
            width="65%">
            <div>
                <el-table
                    :data="preExistingData"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="敏感类型">
                    </el-table-column>
                    <el-table-column
                        prop="word"
                        label="操作">
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="preExistingVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="删除敏感词"
            :visible.sync="deleteWordVisible"
            width="65%">
            <div>
                 <el-alert
                    :closable="false"
                    title=" "
                    type="error"
                    :description="`确定删除 “ ${selectedWord && selectedWord['word'] ? selectedWord['word'] : ''} ” ？`"
                    show-icon>
                 </el-alert>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteWordVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitDeleteSensitiveWord()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import { 
        obtainSensitiveWord,
        obtainSensitiveType,
        addSensitiveType,
        deleteSensitiveType,
        addSensitiveWord,
        deleteSensitiveWord
     } from '@/config/api'
    export default {
        components: {
        },
        data() {
            return {
                // 弹窗 编辑敏感类型 显示
                editTypeVisible: false,
                // 当前页
                currentPage: 1,
                sensitiveValue: '',
                // 新敏感类型
                newSensitiveTypeName: '',
                // 敏感词列表
                sensitiveWord: [],
                // 敏感词列表总数
                wordTotal: 0,
                // 敏感类型 数据
                sensitiveType:[],
                // 敏感类型： 新增|删除
                activeSensitiveTypeValue: 'add',
                // 要删除的敏感类型
                deleteSensitiveValue: '',

               
                // 弹窗 编辑敏感词 显示
                editWordVisible: false,
                // 新敏感词
                newWordValue: '',
                // 敏感词对应的敏感类型
                editWordTypeValue: '',
                // 弹窗 添加敏感词的时候显示数据库已存在的敏感词 显示
                preExistingVisible: false,
                // 添加敏感词的时候显示数据库已存在的敏感词
                preExistingData: [],

                // 弹窗 删除敏感词 显示
                deleteWordVisible: false,
                // 要删除的敏感词
                selectedWord: {}
            };
        },

        computed: {
            data() {
            }
        },
        mounted() {
            this.acquireSensitiveType();
        },
        methods: {
            // 敏感词类型
            handleChangeSensitive () {
                console.log('当前敏感词: '+ this.sensitiveValue)
                this.currentPage = 1;
                this.acquireSensitiveWord();
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                 this.currentPage = val;
                this.acquireSensitiveWord();
            },
            // 弹窗 编辑敏感类型 显示
            handleClickEditSensitiveTypeShow () {
                this.editTypeVisible = true;
                // 初始化value
                this.newSensitiveTypeName = '';
                this.deleteSensitiveValue = '';
            },
            // 编辑敏感类型 
            async submitUpdateSensitiveType () {
                if (this.activeSensitiveTypeValue === 'add') {
                    if (!this.newSensitiveTypeName) {
                        this.$message({
                            message: '请输入敏感类型',
                            type: 'error'
                        });
                        return false;
                    };
                    // 添加敏感词类型
                    const name = this.newSensitiveTypeName;
                    const data = await addSensitiveType(name);
                    if (data.status === 200) {
                        this.acquireSensitiveType();
                        this.newSensitiveTypeName = '';
                        this.editTypeVisible = false;
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '失败成功',
                            type: 'error'
                        });
                    }
                } else if (this.activeSensitiveTypeValue === 'delete') {
                    if (this.deleteSensitiveValue === '') {
                        this.$message({
                            message: '请选择要删除的类型',
                            type: 'error'
                        });
                        return false;
                    }
                    // DeleteSensitiveValue
                    // 获取要删除的类型ID
                    const type = this.deleteSensitiveValue;
                    const data = await deleteSensitiveType(type)
                    if (data.status === 200) {
                        this.acquireSensitiveType();
                        this.deleteSensitiveValue = '';
                        this.editTypeVisible = false;
                        this.$message({
                            message: '删除敏感类型成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '删除失败成功',
                            type: 'error'
                        });
                    }
                }
            },
            // 获取敏感词类型
            async acquireSensitiveType () {
                const data = await obtainSensitiveType();
                 if (data.status === 200) {
                    this.sensitiveType = data.data;
                    if (!this.sensitiveWord.length && this.sensitiveType.length) {
                        this.sensitiveValue = this.sensitiveType[0]['type']
                        this.currentPage = 1;
                        this.acquireSensitiveWord();
                    }
                }
            },
            // 获取敏感词列表
            async acquireSensitiveWord () {
                if (this.sensitiveValue === '') {
                    this.$message.error('请选择敏感词类型');
                    return false;
                };
                const page = this.currentPage;
                const type = this.sensitiveValue;
                const data = await obtainSensitiveWord(type ,page);
                if (data.status === 200) {
                    this.sensitiveWord = data.data;
                    this.wordTotal = data.total;
                }
            },
            // 弹窗 新增敏感词 显示
            handleClickEditSensitiveWordShow () {
                // 弹窗  显示
                this.editWordVisible = true;
                // 初始化 数据
                this.newWordValue = '';
                this.editWordTypeValue = '';
            },
            // 更新 新敏感词
            async submitUpdateSensitiveWord () {
                if (!this.newWordValue) {
                    this.$message({
                        message: '请选择敏感类型',
                        type: 'error'
                    });
                    return false;
                };
                if (!this.newWordValue) {
                    this.$message({
                        message: '请输入要新增的敏感词',
                        type: 'error'
                    });
                    return false;
                };
                // 添加新敏感词
                let words = this.newWordValue.split('\n')
                for (let i = 0; i < words.length; i++) {
                    if (words[i]) {
                        words[i] = words[i].replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, "");  // 去取空格
                        console.log(words[i])
                    }
                };
                const type = this.editWordTypeValue;
                const data = await addSensitiveWord(type,words);
                 if (data.status === 200) {
                    // 初始化 数据
                    this.newWordValue = '';
                    this.editWordTypeValue = '';
                    if (!data.preExisting.length) {
                        // 弹窗  显示
                        this.editWordVisible = false;
                        // 重新更新列表
                        this.acquireSensitiveWord();
                        this.$message({
                            message: '添加敏感词成功',
                            type: 'success'
                        });
                    } else if (data.preExisting.length) {
                        this.preExistingVisible = true;
                        this.preExistingData = data.preExisting;
                    }
                } else {
                    this.$message({
                        message: '添加敏感词失败',
                        type: 'error'
                    });
                }
            },
            // 要删除的敏感词
            handleClickDeleteWordShow (row) {
                // 弹窗 删除敏感词 显示
                this.deleteWordVisible = true;
                // 要删除的敏感词
                this.selectedWord = row;
            },
            // 提交 删除敏感词
            async submitDeleteSensitiveWord () {
                const id = this.selectedWord['id'];
                const data = await deleteSensitiveWord(id);
                if (data.status === 200) {
                    this.deleteWordVisible = false;
                    // 重新更新列表
                    this.acquireSensitiveWord();
                    this.$message({
                        message: '删除敏感词成功',
                        type: 'success'
                    }); 
                } else {
                     this.$message({
                        message: '删除敏感词失败',
                        type: 'success'
                    }); 
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    @import './Sensitive.less';
</style>
